<template>
    <section class="todoapp">
		<mvc-top @content="add"></mvc-top>
		<mvc-list :todo-arr="todoList" @complete="toggle" @del="del"></mvc-list>
		<mvc-btm @clear="clear" @screening="screening" :total="sum"></mvc-btm>
	</section>
</template>
<script>
	// 1.拆分组件，并引入
	import MvcTop from "./top.vue";
	import MvcList from "./list.vue";
	import MvcBtm from "./btm.vue";
	export default {
		name:"Home",
		components:{ MvcTop,MvcList,MvcBtm },
		data(){
			return {
				allList:[],
				todoList:[],
				status:0,
			}
		},
		created(){
			this.allList = JSON.parse(localStorage.getItem("allList")) || [];
			this.todoList = this.allList;
		},
		methods:{
			toggle(item){
				item.completed = !item.completed;
				this.reset();
			},
			add(val){
				if(val.trim()=="") return;
				let maxID = this.allList.reduce((tmp,item) =>  tmp>item.id ? tmp : item.id,1);
				this.allList.push({ id:++maxID, title:val, completed: false });
				this.reset();
			},
			del(id){
				let index = this.allList.findIndex(item=>item.id==id);
				this.allList.splice(index,1);
				this.reset();
			},
			clear(){
				this.allList = this.allList.filter(item=>item.completed==false);
				this.reset();
			},
			screening(index){
				if(index==0){
					this.todoList = this.allList;
				}
				if(index==1){
					this.todoList = this.allList.filter(item=>item.completed==false)
				}
				if(index==2){
					this.todoList = this.allList.filter(item=>item.completed==true)
				}
				this.status = index;
			},
			reset(){
				this.screening(this.status);
				localStorage.setItem("allList",JSON.stringify(this.allList));
			}
		},
		computed:{
			sum(){
				return this.todoList.length;
			}
		}
	}
</script>

<style>

</style>